<template>
    <div>
        <div class="title">维护人员：</div>
        <el-tag
            :key="tag.id"
            v-for="tag in shareList"
            closable
            :disable-transitions="false"
            style="height: 36px;line-height: 36px"
            @close="handleClose(tag)">
            {{tag.sub_name}}
        </el-tag>
        <span v-if="tagVisible" style="margin-left: 10px">
            <!-- <el-select ref="saveTagInput" v-model="tagValue" filterable placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name + '/' + item.ldap"
                :value="item.ldap">
                </el-option>
            </el-select> -->
            <el-select
                v-model="tagValue"
                filterable
                remote
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="loading"
                multiple>
                <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.ldap">
                    <span style="float: left">{{ item.name }}</span>
                    <span style="float: right">{{ item.ldap }}</span>
                </el-option>
            </el-select>
            <el-button class="button-new-tag" type="success" @click="handleInputConfirm">确定</el-button>
            <el-button class="button-new-tag" type="info" @click="handleInputCancel">取消</el-button>
        </span>
        <el-button v-else class="button-new-tag" type="primary" @click="showInput">+ 新增</el-button>
    </div>
</template>

<script>
import { getHeaderName } from '@/app.config'
export default {
    name: 'Talent',
    props: {
        shareId: String
    },
    data() {
        return {
            shareList: [],
            tagVisible: false,
            tagValue: [],
            options: [],
            loading: false
        }
    },
    mounted() {
        // this.initOptions()
        this.initTable()
    },
    methods: {
         remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.$axios({
                        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/list?keywords=' + query,
                        method: "get",
                        headers: getHeaderName(),
                    }).then(res => {
                        this.options = res.data.data
                    })
                }, 200);
            } else {
                this.options = [];
            }
        },
        clearSelect() {
            console.log(999)
            this.options = [];
        },
        initTable() {
            this.$axios({
                url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/project/share',
                method: "get",
                headers: getHeaderName(),
                params: {
                    project_id: this.shareId
                }
            }).then(res => {
                this.shareList = res.data.data
            })
        },
        initOptions(val) {
            this.$axios({
                url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/list?keywords=' + val,
                method: "get",
                headers: getHeaderName(),
            }).then(res => {
                this.options = res.data.data
            })
        },
        handleClose(tag) {
            this.$axios({
                url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/project/share/${tag.id}`,
                method: "delete",
                headers: getHeaderName(),
            }).then(res => {
                if(res.data.code == 200) {
                    this.$message.success(res.data.message)
                    this.tagVisible = false;
                    this.tagValue = '';
                    this.initTable()
                } else {
                    this.$message.error(res.data.message)
                }
            })
        },

        showInput() {
            this.tagVisible = true;
        },
        handleInputCancel() {
            this.tagVisible = false;
            this.tagValue = '';
        },
        handleInputConfirm() {
            let tagValue = this.tagValue;
            if (tagValue) {
                this.$axios({
                    url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/project/share',
                    method: "post",
                    headers: getHeaderName(),
                    data: {
                        project_id: this.shareId,
                        sub_ldap: this.tagValue
                    }
                }).then(res => {
                    if(res.data.code == 200) {
                        this.$message.success(res.data.message)
                        this.tagVisible = false;
                        this.tagValue = '';
                        this.initTable()
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            }
            
        }

    },
    watch: {

    }
}
</script>
<style lang="scss" scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 36px;
    line-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .title {
      font-size: 16px;
      margin-bottom: 20px;
  }
</style>


